<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="../js/jquery.treetable.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/jquery.treetable.css">
    <link rel="stylesheet" type="text/css" href="../css/jquery.treetable.theme.default.css">


</head>
<body>
<table id="treeTable" style="width:800px" align="center">
    <tr>
        <td>名字</td>
        <td>URL</td>
        <td>操作</td>
    </tr>
</table>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            "type" : 'post',
            "url" : '../json/treegrid.json',
            "dataType" : "json",
            "success" : function(data) {
                debugger;
                $.each(data, function(idx, obj) {
                    $("#treeTable").append("<tr data-tt-id=\"" + obj.id + "\" data-tt-parent-id=\"" + obj.pid + "\"><td>" + obj.name + "</td><td>" + obj.permissionValue + "</td><td><button id=\"" + obj.id + "\">编辑</button><button id=\"" + obj.nodeId + "\">删除</button></td></tr>");
                });
                $("#treeTable").treetable({
                    expandable : true,
                    initialState:"expanded",
                    //expandable : true
                    clickableNodeNames:true,//点击节点名称也打开子节点.
                    indent : 30//每个分支缩进的像素数。
                });
            }
        });

    });


</script>
</html>